<template>
  <com-main>
    <div slot="com_header">首页>权限管理>角色列表</div>
    <div slot="com_content">
      <el-table :data="datalist" style="width: 100%">
        <el-table-column type="expand">
          <template slot-scope="{ row }">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-row
                v-for="item in row.children"
                :key="item.id"
              
              >
                <el-col :span="8">
                  <el-tag>{{ item.authName }}</el-tag>
                  <i class="el-icon-caret-right"></i>
                </el-col>
                <el-col :span="16">
                  <el-row v-for="obj in item.children" :key="obj.id">
                    <el-col :span="8">
                      <el-tag type="success">{{ obj.authName }}</el-tag>
                      <i class="el-icon-caret-right"></i>
                    </el-col>
                    <el-col :span="8">
                      <el-row v-for="(aa, index) in obj.children" :key="aa.id">
                        <el-col>
                          <el-tag
                            type="danger"
                            closable
                            @close="del(row.id, aa.id, item)"
                            >{{ aa.authName }}</el-tag
                          >
                        </el-col>
                      </el-row>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column label="序号" type="index"> </el-table-column>
        <el-table-column label="角色名称">
          <template slot-scope="{ row }">
            <div v-if="one == true">{{ row.roleName }}</div>
            <div v-else>
              <el-input v-model="row.roleName"></el-input>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="角色描述">
          <template slot-scope="{ row }">
            <div v-if="one == true">{{ row.roleDesc }}</div>
            <div v-else>
              <el-input v-model="row.roleDesc"></el-input>
            </div>
          </template>
        </el-table-column>
        <el-table-column>
          <template v-slot:header="{ row }">
            <el-button type="primary" @click="dialogFormVisible = true"
              >添加角色</el-button
            >
          </template>
          <el-table-column label="操作">
            <template slot-scope="{ row }">
              <el-button
                :type="one == true ? 'primary' : 'warning'"
                icon="el-icon-edit"
                size="small"
                @click="searoles(row)"
                >{{ one == true ? "编辑" : "完成" }}</el-button
              >
              <el-button
                type="danger"
                icon="el-icon-delete"
                size="small"
                @click="delrole(row)"
                >删除</el-button
              >
              <el-button
                type="warning"
                icon="el-icon-s-tools"
                size="small"
                @click="getrights(row)"
                >分配权限</el-button
              >
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>

      <!-- 添加角色弹窗 -->
      <div>
        <el-dialog title="添加角色" :visible.sync="dialogFormVisible">
          <el-form :model="rolesobj">
            <el-form-item label="角色名称" label-width="200px">
              <el-input
                v-model="rolesobj.roleName"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="角色描述" label-width="200px">
              <el-input
                v-model="rolesobj.roleDesc"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="save">确 定</el-button>
          </div>
        </el-dialog>
      </div>

      <!-- 分配权限弹窗 -->

      <el-dialog title="分配权限" :visible.sync="FormVisible">
        <el-tree
          :data="datasouse"
          :props="defaultProps"
          show-checkbox
          default-expand-all
          node-key="id"
          ref="tree"
        ></el-tree>
        <div slot="footer" class="dialog-footer">
          <el-button @click="close">取 消</el-button>
          <el-button type="primary" @click="saveroletan()"
            >确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </com-main>
</template>
<script>
import ComMain from "../../components/commain.vue";
import {
  api_roles,
  api_del,
  api_rolessave,
  api_delroles,
  api_searoles,
  api_tree,
  api_rolesrights
} from "../../api/rights";
export default {
  components: {
    ComMain,
  },
  data() {
    return {
      FormVisible: false,
      dialogFormVisible: false,
        one:true,
      //角色列表
      datalist: [],
    //添加角色参数
      rolesobj: {
        roleName: "",
        roleDesc: "",
      },
      //权限弹窗列表
     datasouse:[],
       defaultProps: {
          children: 'children',
          label: 'authName'
        },


      treelist:[],
   
      list:[]
    };
  },
  mounted() {
    this.query();
  },
  methods: {

    //渲染角色
    async query() {
      let rst = await api_roles(this.searchobj);
      let { data, meta } = rst;
      this.datalist = data;
   
    },
    //删除角色指定权限
    async del(roleId, rightId) {
      let rst = await api_del(`roles/${roleId}/rights/${rightId}`);
      let { data, meta } = rst;
      let { msg, status } = meta;
      if (status == 200) {
        this.$message.success(msg); 
      }
      this.query();
    },
  //   //添加角色
    async save() {
      let rst = await api_rolessave(this.rolesobj);
      let { data, meta } = rst;
      if (meta.status == 201) {
        this.$message.success(meta.msg);
        this.query();
      }
      this.dialogFormVisible = false;
      this.rolesobj = {};
    },
  //   //删除角色
    async delrole(row) {
      let rst = await api_delroles(`roles/${row.id}`);
      let { meta } = rst;
      let { msg, status } = meta;
      if (status == 200) {
        this.$message.success(msg);
        this.query();
      }
    },
  //   //编辑提交角色
    async searoles(row) {
      if(!this.one){
        let rst = await api_searoles(`roles/${row.id}`, {
        roleName: row.roleName,
        roleDesc: row.roleDesc,
      });
      let{meta,data}=rst;
      if(meta.status==200){
        this.$message.success(meta.msg);
      }else{
        this.$message.error(meta.msg);
      }
      }
       this.one=!this.one;
    },
  //    //定义一个递归函数
    digui(obj,arr){
      if(!obj.children){
        arr.push(obj.id);
        return;
      }
      obj.children.forEach((item)=>{
        this.digui(item,arr);
      })
    },
  //   //分配权限
    async getrights(row) {
   this.objrole=row;
      this.FormVisible = true;
      let rst = await api_tree();
      let { data, meta } = rst;
      this.datasouse = data;
      if (meta.status == 200) {
        this.digui(row,this.treelist);
        this.$refs.tree.setCheckedKeys(this.treelist);
       console.log(this.treelist);
      } else {
        this.$message.error(meta.msg);
      }
    },
     


    async saveroletan(){
      console.log(this.objrole);
        let{id}=this.objrole;
        let arr=this.$refs.tree.getCheckedKeys();
        let arr1=this.$refs.tree.getHalfCheckedKeys();
        arr=[...arr,...arr1].join();
      let rst=await api_rolesrights(`roles/${id}/rights`,{rids:arr});
      console.log(rst);
      let {meta}=rst;
      let{msg,status}=meta;
      if(status==200){
        this.$message.success(msg);
        // console.log(arr);
      }else{
        this.$message.error(msg);
      }
      console.log(rst);
        this.treelist=[]
        this.FormVisible=false;
          this.query(); 
          
    },

    // 取消关闭弹窗
    close(){
      this.FormVisible=false;
      this.treelist=[];
    }

  },
};
</script>
<style lang="less" scoped>
// .cell {
//   display: flex;
//   justify-content: center;
// }
// .el-table .el-table__cell {
//   text-align: center;
//   //   display: flex;
//   //   flex-direction: column;
// }
// .el-row {
//   margin-top: 10px;
// }
</style>